<template>
  <div class="operationLog">
    <div class="search-inp">
      <div class="item">
        <span class="item-text">用户姓名</span>
        <input
          type="text"
          v-model="userName"
          placeholder="请输入用户姓名/手机号"
        />
      </div>
      <div class="item">
        <span class="item-text">日期</span>
        <el-date-picker
          v-model="dateValue"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="item">
        <div class="search-btn">
          <span class="my-btn" @click="searchClick" :class="colorBlue == 0?'my-back-blue':''" @mousemove="mouseMove(0)">筛选</span>
          <span class="my-btn" style='margin-left:20px' @click="emptyClick" :class="colorBlue == 1?'my-back-blue':''" @mousemove="mouseMove(1)">清空</span>
        </div>
      </div>
    </div>
      <div class="table">
      <el-table :data="merchantsData" stripe border style="width: 80%">
        <el-table-column type='index' width='100' label="序号"></el-table-column>
        <el-table-column
          prop="operationDescribtion"
          label="操作内容"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="操作时间"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="操作者"
        ></el-table-column>
        
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        colorBlue:0,
        userName:'',//用户姓名
        dateValue:'',//日期
        currentPage4: 1, //跳转到第几页
        page:1,
        pageSize:5,
        merchantsData:[],
        total: 0,
    };
  },
  mounted() {
      this. getmerchantsData()
  },
  methods: {
    //切换按钮样式
      mouseMove(index) {
          this.colorBlue = index;
      },
    //筛选
    searchClick(){
      this.currentPage4 = 1
      this.getmerchantsData(1)
    },
    //清空
    emptyClick(){
        this.userName='',//用户姓名
        this.dateValue=''//日期
    },

    //获取数据
    getmerchantsData(res) {
      if(res) {
        var param={
            page:1,
            pageSize:this.pageSize,
            userName:this.userName,
            createTime:this.dateValue
        }
      }else {
        var param={
            page:this.page,
            pageSize:this.pageSize,
            userName:this.userName,
            createTime:this.dateValue
        }
      }
        
       this.axios({
        url: '/log/logList',
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
        console.log(res)
        this.merchantsData = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getmerchantsData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getmerchantsData();
    },
    // 
  },
  watch: {},
};
</script>

<style scoped>
/* 搜索input框 */
.totalNum {
  float: left;
  position: relative;
  left: 420px;
  top: 35px;
  font-size: 14px;
  color: #606266;
}
.search-inp {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.search-inp .item {
  width: 330px;
  margin-bottom: 6px;
}
.search-inp .item-text {
  width: 100px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
</style>